<template>
    <div>
        <el-row class="mb20">
            <el-col :md="20">
                <el-form :inline="true" class="demo-form-inline">
                    <el-button type="primary" @click="dialogVisible = true">刷选</el-button>
                    <el-button type="primary">
                        <i class="el-icon-refresh"></i>
                    </el-button>
                </el-form>
                <el-dialog :title="title + '筛选'" :visible.sync="dialogVisible" width="40%">
                    <el-form :model="ruleForm" ref="ruleForm" label-width="150px" class="demo-ruleForm">
                        <el-form-item label="用户名：" prop="name">
                            <el-input v-model="ruleForm.name" auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="有效性：" prop="type">
                            <el-radio-group v-model="ruleForm.youxiao">
                                <el-radio :label="1">有效</el-radio>
                                <el-radio :label="2">无效</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="负责分销商：" prop="value1" v-show="$route.name == 'sales'">
                            <el-select v-model="ruleForm.value1" filterable placeholder="请选择" class="w100">
                                <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="所属团队：" prop="value2" v-show="$route.name == 'sales'">
                            <el-select v-model="ruleForm.value2" filterable placeholder="请选择" class="w100">
                                <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                            <el-button @click="dialogVisible = false">取 消</el-button>
                            <el-button type="primary" @click="selectCarrier">查询</el-button>
                        </span>
                </el-dialog>
            </el-col>
            <el-col :md="4" class="float-right">
                <router-link :to="users_new">
                    <el-button type="primary">新增</el-button>
                </router-link>
            </el-col>
        </el-row>
        <el-table :data="tableData" stripe border style="width: 100%">
            <el-table-column prop="name" label="用户名" width="160">
                <template slot-scope="scope">
                    <span class="link" @click="getDetail(scope.row)">{{ scope.row.name}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="chinese_name" label="中文名" width="120">
            </el-table-column>
            <el-table-column prop="is_youxiao" label="有效性" width="100">
            </el-table-column>
            <el-table-column prop="created_time" label="创建时间" width="160">
            </el-table-column>
            <el-table-column prop="login_times" label="登录次数" width="80">
            </el-table-column>
            <el-table-column prop="current_login_time" label="最近登录时间" width="160">
            </el-table-column>
            <el-table-column prop="methods" label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" @click="editSingData(scope.row)">
                        编辑</el-button>
                    <el-button size="mini" plain @click="dialogVisible1 = true" v-show="$route.name == 'sales'">管理分销商</el-button>
                    <el-button size="mini" type="primary" @click="deleteSingData(scope.row)">失效</el-button>
                </template>
            </el-table-column>
      </el-table>
        <el-dialog title="管理分销商" :visible.sync="dialogVisible1" width="40%">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
                <el-form-item prop="name">
                    <el-select v-model="ruleForm.name" filterable placeholder="请选择" class="w70">
                        <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                    <el-button type="primary">增加分销商</el-button>
                </el-form-item>
                <el-table :data="tableData1" stripe border style="width: 100%">
                    <el-table-column prop="id" label="No" width="200">
                    </el-table-column>
                    <el-table-column prop="chinese_name" label="分销商" width="200">
                    </el-table-column>
                    <el-table-column prop="methods" label="操作">
                        <template slot-scope="scope">
                            <el-button size="mini" type="primary" @click="editSingData(scope.row)">
                                删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                dialogVisible: false,
                dialogVisible1: false,
                users_new: '/users/new',
                ruleForm: {
                    name: '',
                    youxiao: 1,
                    vlaue1: '',
                    value2: '',
                },
                title: '管理员',
                options1: [{
                    value: '选线1',
                    label: '上海众创'
                }],
                options2: [{
                    value: '选线1',
                    label: '软软'
                }],
                tableData: [{
                    id: 1,
                    name: 'admin',
                    chinese_name: '管理员',
                    is_youxiao: '有效',
                    created_time: '2018-05-23 18:09:56',
                    login_times: '0',
                    current_login_time: '2018-05-23 18:09:56'
                }],
                tableData1: [{
                    id: 1,
                    chinese_name: '上海创城'
                }],
                rules: {
                    name: [{
                        required: true,
                        message: '请选择分销商',
                        trigger: 'change'
                    }]
                }
            }
        },
        created() {
            if (this.$route.name == 'admin') {
                this.title = '管理员'
                this.users_new = '/users/new'
            } else if (this.$route.name == 'sales') {
                this.title = '销售'
                this.users_new = '/users/sales/new'
            } else if (this.$route.name == 'customer_service') {
                this.title = '客服'
                this.users_new = '/users/customer_service/new'
            } else if (this.$route.name == 'finance') {
                this.title = '财务'
                this.users_new = '/users/finance/new'
            }
        },
        methods: {
            getDetail(goods) {
                var path = ''
                if (this.$route.name == 'admin') {
                    path = `/users/${goods.id}`
                } else if (this.$route.name == 'sales') {
                    path = `/users/sales/${goods.id}`
                } else if (this.$route.name == 'customer_service') {
                    path = `/users/customer_service/${goods.id}`
                } else if (this.$route.name == 'finance') {
                    path = `/users/finance/${goods.id}`
                }
                this.$router.push({
                    path: path
                })
            },
            editSingData() {
                var path = ''
                if (this.$route.name == 'admin') {
                    path = '/users/edit'
                } else if (this.$route.name == 'sales') {
                    path = '/users/sales/edit'
                } else if (this.$route.name == 'customer_service') {
                    path = '/users/customer_service/edit'
                } else if (this.$route.name == 'finance') {
                    path = '/users/finance/edit'
                }
                this.$router.push({
                    path: path
                })
            }
        }
    }
</script>

<style scoped lang="scss">
    .w100 {
        width: 100%;
    }
    
    .w70 {
        width: 70%;
        margin-right: 20px;
    }
</style>